var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
let beginGame=false;
let isGameOver = false;
let board = null;
let isPlayerTurn = true;
let isPlayerFirst = true; // 玩家是否先手，默认为 true
let playerColor = "#000"; // 玩家默认黑棋
let aiColor = "#fff"; // AI 默认白棋
const tolerance = 20; // 鼠标靠近交叉点的距离容忍度
let point={
    x:null,
    y:null
}
//棋盘坐标标记
let lastX=null;
let lastY=null;
let moveHistory = []; // 用于保存历史移动

// 初始化游戏
function initGame(sessionId) {
    $.ajax({
        url: "/api/game/start",
        type: "POST",
        data: {
            playerFirst: isPlayerFirst,
            difficult: document.getElementById("options-difficult").value,
            AIModel: document.getElementById("options-AI").value,
            sessionId: sessionId  // 添加 sessionId
        },
        success: function (response) {
            board = response.board;
            drawBoard();
            if (!isPlayerFirst){
                point.x = response.currentY;
                point.y = response.currentX;
            }

            if(point.x !== null && point.y !== null)
                drawCircleLight();
        },
        error: function (error) {
            console.error("初始化游戏失败:", error);
            showMessage("游戏初始化失败，请重试");
        }
    });
}

// 页面加载时获取或创建 sessionID
window.onload = function () {
    let sessionId = localStorage.getItem('sessionId');
   // console.log("session:{}",sessionId);
    if (!sessionId) {
        $.ajax({
            url: "/api/game/start1",
            type: "POST",
            data: {
                playerFirst: isPlayerFirst,
                difficult: document.getElementById("options-difficult").value,
                AIModel: document.getElementById("options-AI").value,
            },
            success: function (response) {
                sessionId = response.sessionId; // 假设后端返回 sessionId
               // console.log("session:1111111", sessionId);
                localStorage.setItem('sessionId', sessionId);
                initGame(sessionId); // 使用 sessionId 初始化游戏
            },
            error: function (error) {
                console.error("初始化游戏失败:", error);
                showMessage("游戏初始化失败，请重试");
            }
        });
    } else {
      //  console.log("342rewef");
        initGame(sessionId);
    }
};

// 画棋盘
function drawBoard() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.lineWidth = 2;
    ctx.beginPath();

    // 调整网格大小以适应新的画布尺寸
    for (var i = 1; i < 16; i++) {
        ctx.moveTo(40 * i, 40);
        ctx.lineTo(40 * i, 600);
        ctx.moveTo(40, 40 * i);
        ctx.lineTo(600, 40 * i);
    }
    ctx.stroke();

    // 绘制棋盘上的已有棋子
    if (board) {
        const grid = board.grid;
        for (let i = 0; i < grid.length; i++) {
            for (let j = 0; j < grid[i].length; j++) {
                if (grid[i][j] === 1) {
                    drawChess(40 * (j + 1), 40 * (i + 1), playerColor); // 玩家棋子
                } else if (grid[i][j] === 2) {
                    drawChess(40 * (j + 1), 40 * (i + 1), aiColor); // AI棋子
                }
            }
        }
    }
}

// 绘制棋子
// 优化棋子绘制效果
function drawChess(x, y, color) {
    ctx.save();
    ctx.beginPath();
    ctx.arc(x, y, 18, 0, Math.PI * 2, false);

    // 添加渐变效果
    let gradient = ctx.createRadialGradient(x - 3, y - 3, 1, x - 3, y - 3, 18);
    if (color === "#000") {
        gradient.addColorStop(0, "#666");
        gradient.addColorStop(1, "#000");
    } else {
        gradient.addColorStop(0, "#fff");
        gradient.addColorStop(1, "#ccc");
    }

    ctx.fillStyle = gradient;
    ctx.fill();

    // 添加阴影效果
    ctx.shadowColor = 'rgba(0,0,0,0.5)';
    ctx.shadowBlur = 5;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;

    ctx.strokeStyle = color === "#000" ? "#333" : "#ccc";
    ctx.stroke();
    ctx.restore();
}

function drawHighlightCircle(x, y, color) {
    ctx.save();
    ctx.beginPath();

    // 绘制一个绿色圆环
    ctx.arc(x, y, 18, 0, Math.PI * 2, false); // 使用棋子的半径18
    ctx.lineWidth = 3;
    ctx.strokeStyle = "#00FF00"; // 绿色光环
    ctx.shadowColor = 'rgba(0,255,0,0.7)'; // 绿色阴影效果
    ctx.shadowBlur = 8;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.stroke();

    // 光效的颜色与亮度根据棋子的颜色来区分
    ctx.beginPath();
    ctx.arc(x, y, 18, 0, Math.PI * 2, false); // 和棋子半径一致
    // let gradient = ctx.createRadialGradient(x, y, 18, x, y, 24); // 设置更小的光效范围
    let gradient = ctx.createRadialGradient(x - 3, y - 3, 1, x - 3, y - 3, 18);
    if (color==="#fff") {
        // 对于白棋，光效较亮
        gradient.addColorStop(0, "#fff");
        gradient.addColorStop(1, "#ccc");
    } else {
        // 对于黑棋，光效较暗
        gradient.addColorStop(0, '#666');
        gradient.addColorStop(1, '#000');
    }
    ctx.fillStyle = gradient;
    ctx.fill();

    ctx.restore();
}

function drawLShape(x,y){
    console.log("标记");
    ctx.save();
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#00FF00"; // 黑色线

    var gridX=x;
    var gridY=y;

    // 画左上方向的“L”形
    if (gridX>=80&&gridY>=80){
        ctx.beginPath();
        ctx.moveTo(gridX - 10, gridY - 10); // 起点
        ctx.lineTo(gridX - 10, gridY - 20); // 垂直线
        ctx.moveTo(gridX - 10, gridY - 10); // 起点
        ctx.lineTo(gridX - 20, gridY - 10); // 水平线
        ctx.stroke();
    }


    // 画右上方向的“L”形
    if (gridX<=560&&gridY>=80&&gridX>=40&&gridY>40){
        ctx.beginPath();
        ctx.moveTo(gridX + 10, gridY - 10); // 起点
        ctx.lineTo(gridX + 10, gridY - 20); // 垂直线
        ctx.moveTo(gridX + 10, gridY - 10); // 起点
        ctx.lineTo(gridX + 20, gridY - 10); // 水平线
        ctx.stroke();
    }


    // 画左下方向的“L”形
    if (gridY<=560&&gridX>=80) {
        ctx.beginPath();
        ctx.moveTo(gridX - 10, gridY + 10); // 起点
        ctx.lineTo(gridX - 10, gridY + 20); // 垂直线
        ctx.moveTo(gridX - 10, gridY + 10); // 起点
        ctx.lineTo(gridX - 20, gridY + 10); // 水平线
        ctx.stroke();
    }
    // 画右下方向的“L”形
    if (gridX<=560&&gridY<=560){
        ctx.beginPath();
        ctx.moveTo(gridX + 10, gridY + 10); // 起点
        ctx.lineTo(gridX + 10, gridY + 20); // 垂直线
        ctx.moveTo(gridX + 10, gridY + 10); // 起点
        ctx.lineTo(gridX + 20, gridY + 10); // 水平线
        ctx.stroke();
    }

    ctx.restore();
}

function clearL() {
    // 保存当前绘图状态
    ctx.save();

    var gridX = lastY;
    var gridY = lastX;

    // 清除左上方向的"L"形
    if (gridX >= 80 && gridY >= 80) {
        // 清除垂直线
        ctx.clearRect(gridX - 11, gridY - 20, 3, 12);
        // 清除水平线
        ctx.clearRect(gridX - 20, gridY - 11, 12, 3);
    }

    // 清除右上方向的"L"形
    if (gridX <= 560 && gridY >= 80 && gridX >= 40 && gridY > 40) {
        // 清除垂直线
        ctx.clearRect(gridX + 9, gridY - 20, 3, 12);
        // 清除水平线
        ctx.clearRect(gridX + 9, gridY - 11, 12, 3);
    }

    // 清除左下方向的"L"形
    if (gridY <= 560 && gridX >= 80) {
        // 清除垂直线
        ctx.clearRect(gridX - 11, gridY + 9, 3, 12);
        // 清除水平线
        ctx.clearRect(gridX - 20, gridY + 9, 12, 3);
    }

    // 清除右下方向的"L"形
    if (gridX <= 560 && gridY <= 560) {
        // 清除垂直线
        ctx.clearRect(gridX + 9, gridY + 9, 3, 12);
        // 清除水平线
        ctx.clearRect(gridX + 9, gridY + 9, 12, 3);
    }

    // 重绘该位置的棋盘线
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#000";

    // 重绘水平线
    ctx.moveTo(Math.max(40, gridX - 20), gridY);
    ctx.lineTo(Math.min(600, gridX + 20), gridY);

    // 重绘垂直线
    ctx.moveTo(gridX, Math.max(40, gridY - 20));
    ctx.lineTo(gridX, Math.min(600, gridY + 20));

    ctx.stroke();

    // 如果该位置有棋子，重绘棋子和高亮效果
    if (board) {
        const row = Math.floor(gridY / 40) - 1;
        const col = Math.floor(gridX / 40) - 1;
        if (row >= 0 && row < 15 && col >= 0 && col < 15) {
            if (board.grid[row][col] === 1) {
                drawChess(gridX, gridY, playerColor);
            } else if (board.grid[row][col] === 2) {
                drawChess(gridX, gridY, aiColor);
                // 如果是AI最后下的棋子，重绘高亮效果
                if (point.x === col && point.y === row) {
                    drawHighlightCircle(gridX, gridY, aiColor);
                }
            }
        }
    }

    ctx.restore();
}

// 悔棋功能
// 悔棋功能
document.getElementById("undoButton").addEventListener("click", function () {
    if (!isPlayerTurn) {
        alert("当前不是您的回合，无法悔棋！");
        return;
    }

    if (moveHistory.length < 2) {
        alert("没有可悔的棋步！");
        return;
    }

    // 撤回玩家和AI的上一步棋
    const lastMove = moveHistory.pop(); // 撤回AI的棋步
    const playerMove = moveHistory.pop(); // 撤回玩家棋步

    // 更新棋盘状态
    board.grid[lastMove.row][lastMove.col] = 0; // 撤销AI棋子
    board.grid[playerMove.row][playerMove.col] = 0; // 撤销玩家棋子

    drawBoard(); // 重新绘制棋盘

    // 发送最新的棋盘状态到后端
    let sessionId = localStorage.getItem('sessionId'); // 获取 sessionID
    $.ajax({
        url: "/api/game/update",
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify({ board: board, sessionId: sessionId }), // 发送棋盘和 sessionID
        success: function (response) {
            board = response.board; // 更新本地棋盘状态
            drawBoard();
        },
        error: function (error) {
            console.error("更新棋盘失败:", error);
        }
    });
});


// 玩家选择执黑先手
document.getElementById("black-first").addEventListener("click", function () {
    beginGame=true;
    isPlayerFirst = true;
    playerColor = "#000";
    aiColor = "#fff";
    this.disabled = true;
    document.getElementById("white-second").disabled = true;
    let sessionId = localStorage.getItem('sessionId');
    initGame(sessionId);
    showMessage("游戏开始，您执黑先手");
});

// 玩家选择执白后手
document.getElementById("white-second").addEventListener("click", function () {
    beginGame=true;
    isPlayerFirst = false;
    playerColor = "#fff";
    aiColor = "#000";
    this.disabled = true;
    document.getElementById("black-first").disabled = true;
    let sessionId = localStorage.getItem('sessionId');
    initGame(sessionId);
    showMessage("游戏开始，您执白后手");
});

// 放弃游戏并重置
document.getElementById("abandon-game").addEventListener("click", function () {
    beginGame=false;
    isGameOver = false;
    board = null;
    isPlayerTurn = true;
    playerColor = "#000";
    aiColor = "#fff";

    // 重置按钮状态
    document.getElementById("black-first").disabled = false;
    document.getElementById("white-second").disabled = false;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBoard();
    point.x=null;
    point.y=null;
    alert("游戏已重置，请选择执黑或执白重新开始");
});

function clearHighlightCircle(x, y) {
    ctx.save();
    ctx.beginPath();

    // 绘制一个完全透明的覆盖层，覆盖光效区域
    ctx.arc(x, y, 24, 0, Math.PI * 2, false); // 使用与光效相同的半径24
    ctx.fillStyle = 'rgba(0, 0, 0, 0)'; // 完全透明的颜色

    // 绘制透明覆盖层
    ctx.fill();

    ctx.restore();
}

//处理玩家鼠标移动
canvas.addEventListener('mousemove',function (e){
    if (isGameOver||!beginGame) return;

    var row = Math.floor((e.offsetY + 20) / 40) - 1;
    var col = Math.floor((e.offsetX + 20) / 40) - 1;

    //越界判断
    if (row < 0 || row > 14 || col < 0 || col > 14) return;

    //该点有棋子则不显示
    if (board && board.grid[row][col] !== 0) return;

    const closestX=(row+1)*40;
    const closestY=(col+1)*40;

    clearL();

    if (Math.abs(e.offsetY-closestX)<tolerance&&Math.abs(e.offsetX-closestY)<tolerance){

        drawLShape(closestY, closestX);
    }
    lastY=closestY;
    lastX=closestX;
})


// 处理玩家落子
// 处理玩家落子
canvas.addEventListener("click", function (e) {
    if (!beginGame) alert("请选择执黑或执白开始游戏");
    if (isGameOver || !beginGame || !isPlayerTurn) return;

    var row = Math.floor((e.offsetY + 20) / 40) - 1;
    var col = Math.floor((e.offsetX + 20) / 40) - 1;

    // 越界判断
    if (row < 0 || row > 14 || col < 0 || col > 14) return;

    // 检查该位置是否已经有棋子
    if (board && board.grid[row][col] !== 0) return;

    // 显示玩家的棋子
    drawChess(40 * (col + 1), 40 * (row + 1), playerColor);

    // 更新棋盘状态
    if (board) {
        board.grid[row][col] = 1;
        moveHistory.push({ row: row, col: col });
    }

    // 禁用玩家操作
    isPlayerTurn = false;

    // 发送玩家移动请求到后端
    let sessionId = localStorage.getItem('sessionId'); // 获取 sessionID
  //  console.log("move{}", sessionId);
    $.ajax({
        url: "/api/game/move",
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify({
            row: row,
            col: col,
            sessionId: sessionId // 发送 sessionID
        }),
        success: function (response) {
            board = response.board;
            console.log(response);
            drawBoard();

            // 只绘制AI的棋子
            const grid = board.grid;
            for (let i = 0; i < grid.length; i++) {
                for (let j = 0; j < grid[i].length; j++) {
                    if (grid[i][j] === 2) {
                        drawChess(40 * (j + 1), 40 * (i + 1), aiColor);
                    }
                }
            }

            // 检查游戏状态
            if (response.gameState !== "IN_PROGRESS") {
                isGameOver = true;
                showGameResult(response.gameState);
                return;
            } else {
                isPlayerTurn = true;
            }

            //console.log(response.currentY);
           // console.log(response.currentX);
            point.x = response.currentY; // 更新最新AI棋子坐标
            point.y = response.currentX;
            moveHistory.push({ row: point.y, col: point.x });
            drawCircleLight();
        },
        error: function (error) {
            console.error("移动失败:", error);
            if (board) {
                board.grid[row][col] = 0; // 撤销玩家棋子
                drawBoard();
            }
            isPlayerTurn = true;
        }
    });
});


function drawCircleLight(){
    if (point.x !== null && point.y !== null) {
        clearHighlightCircle(40 * (point.x + 1), 40 * (point.y + 1));
    }

        drawHighlightCircle(40 * (point.x + 1), 40 * (point.y + 1), aiColor);
}

// 初始化
drawBoard();

// 添加消息显示函数
function showMessage(message) {
    $("#game-message").text(message).fadeIn();
    setTimeout(() => {
        $("#game-message").fadeOut();
    }, 1000);
}

function showResultMessage(message){
    $("#result-message").text(message).fadeIn();
    setTimeout(() => {
        $("#result-message").fadeOut();
    }, 3000);
}


// 显示游戏结果
function showGameResult(gameState) {
    if (gameState === "PLAYER_WIN") {
        showResultMessage("恭喜你赢了！🎉")
    } else if (gameState === "AI_WIN") {
        showResultMessage("AI赢了！🤖")
    }
    else{
        showResultMessage("平局！🤝")
    }
}

$("#back").click(function () {
    window.location.href = "../game/index.html?show=choose";
});